WordPress est glisser-déposer, MAIS… voici pourquoi je manipule toujours le HTML

Vous êtes-vous déjà demandé comment fonctionnent réellement les sites web ?

Cela peut sembler magique, mais il existe un langage derrière chaque page web que vous voyez. Ce langage s'appelle HTML.

Considérez le HTML comme les éléments de base d'Internet.

Même une petite connaissance du HTML peut vraiment améliorer votre expérience WordPress. J'ai vu de mes propres yeux comment cela aide les gens à rendre leurs sites WordPress encore meilleurs.

Dans cet article, j'expliquerai ce qu'est le HTML, pourquoi il est important et comment vous pouvez ajouter du code HTML personnalisé à votre site WordPress.

Vous pourriez être surpris de voir à quel point cela peut être facile et utile pour une conception web efficace !

Table des matières

Qu'est-ce que le HTML ?

HTML signifie HyperText Markup Language. En gros, le HTML est le langage qui structure le contenu web. Pensez-y comme au squelette d'une page web.

Le HTML utilise ce qu'on appelle des "balises". Les balises indiquent au navigateur web quelle est chaque partie de votre contenu.

Par exemple, les balises peuvent indiquer au navigateur que quelque chose est un titre, un paragraphe ou une image. Les navigateurs lisent ces balises pour afficher les pages web comme elles sont censées apparaître.

Le HTML n'est pas un langage de programmation. C'est plutôt une façon d'organiser l'information pour que les navigateurs puissent la comprendre.

Pourquoi se soucier du HTML dans WordPress ?

WordPress est super facile à utiliser. Vous pouvez créer un site web entier sans connaître aucun code. Alors, pourquoi s'embêter avec le HTML ?

Eh bien, le HTML vous donne plus de contrôle sur votre contenu. Parfois, l'éditeur WordPress normal ne suffit pas.

Disons que vous voulez ajouter un attribut spécifique à une image. Ou peut-être que vous voulez créer un style de liste vraiment unique. Le HTML vous permet de faire ce genre de choses.

Le HTML est également une bouée de sauvetage pour le dépannage.

Vous avez déjà eu un problème de mise en forme étrange dans WordPress ? Examiner le HTML peut vous aider à trouver et à résoudre rapidement le problème. C'est beaucoup plus rapide que de deviner avec l'éditeur visuel.

De plus, le HTML vous offre de la flexibilité. Vous voulez ajouter des personnalisations avancées ? Comme des classes personnalisées pour le style ou des mises en page plus complexes ? Le HTML débloque ces possibilités.

Et voici un argument de poids : l'épreuve du temps.

WordPress évolue constamment. Mais le HTML ? C'est une compétence web fondamentale qui sera toujours utile.

Je l'ai vu maintes et maintes fois : comprendre le HTML vous rend beaucoup plus adaptable dans le monde du web.

HTML 101 : Les bases

Parlons des éléments constitutifs du HTML. Ils s'appellent des balises.

Les balises sont des instructions qui indiquent au navigateur quoi faire de votre contenu. La plupart des balises viennent par paires : une balise ouvrante et une balise fermante.

Par exemple, si vous voulez créer un paragraphe, vous utilisez la balise <p> pour commencer et </p> pour le terminer.

Voyez-vous la barre oblique dans la balise fermante ? C'est ainsi que vous savez que c'est la fin.

Examinons quelques balises HTML courantes que vous utiliserez souvent :

Les titres servent aux titres et sous-titres. Vous avez <h1>, <h2>, <h3>, <h4>, <h5> et <h6>.

<h1> est le titre le plus important (généralement le titre principal), et <h6> est le moins important.

Les liens sont ce qui fait du web, eh bien, un web ! La balise <a> crée des liens. <a> signifie « anchor » (ancre).

Vous voulez afficher des images ? La balise <img> est votre amie. <img> est l'abréviation de « image ».

Besoin de faire une liste de choses ? Le HTML s'en charge. Il existe deux types principaux :

• <ul> pour les listes non ordonnées (puces). « ul » signifie « unordered list » (liste non ordonnée).
• <ol> pour les listes ordonnées (listes numérotées). « ol » signifie « ordered list » (liste ordonnée).

Et à l'intérieur des balises <ul> et <ol>, vous utilisez des balises <li> pour chaque élément de la liste. « li » signifie « list item » (élément de liste).

Les balises peuvent aussi avoir des attributs. Les attributs fournissent des informations supplémentaires sur une balise.

Par exemple, la balise <a> a besoin d'un attribut href pour indiquer où le lien doit pointer. Comme ceci : <a href="https://example.com">Texte du lien</a>. L'attribut href contient l'adresse du site web.

Et la balise <img> a besoin d'un attribut src pour indiquer où trouver le fichier image. Elle devrait également avoir un attribut alt pour le « texte alternatif », ce qui est important si l'image ne peut pas se charger ou pour l'accessibilité.

Comme ceci : <img src="image.jpg" alt="Texte descriptif">.

Voici un exemple très simple de HTML en action :

<h1>Welcome to My Blog</h1>

<p>This is my first paragraph of content. It's going to be awesome!</p>

<a href="https://duplicator.com">Check out Duplicator!</a>

Ce code créerait un titre principal, un paragraphe et un lien sur une page web.

Quand j'ai commencé à apprendre le HTML, ces balises de base étaient mon point de départ. Et honnêtement ? Elles sont toujours le fondement de presque tout ce que je fais en ligne. Ces balises simples sont puissantes !

Mettre le HTML au travail : Exemples pratiques

Alors, comment utiliser concrètement le HTML dans WordPress ? Examinons quelques exemples.

Vous voulez mettre du texte en gras ou en italique ? Le HTML peut le faire.

Utilisez les balises <strong> et </strong> pour mettre du texte en gras. Ou utilisez les balises <b> et </b>, elles mettent également le texte en gras.

Comme ceci : <strong>Ce texte est en gras</strong>.

Pour l’italique, utilisez <em> ou <i>. Comme ceci : <em>Ce texte est en italique</em>.

Ces balises vous aident à mettre l’accent sur des mots et des phrases dans votre contenu.

Nous avons parlé de la balise <a>. Vous pouvez l’utiliser pour créer des liens vers d’autres pages de votre site, ou vers d’autres sites web.

Vous pouvez créer des liens vers du texte, des images ou même des boutons. Tout est une question d’utilisation de cette balise <a> avec le bon attribut href.

Vous voulez ajouter une vidéo YouTube ou Vimeo à votre site WordPress ? La plupart des plateformes vidéo vous fournissent des codes d’intégration. Ces codes sont généralement en HTML, utilisant souvent des balises <iframe>.

Copiez simplement le code d’intégration de YouTube (ou de l’endroit où votre vidéo est hébergée) et collez-le dans WordPress. WordPress sait quoi en faire.

Besoin d’une liste à puces ? Utilisez les balises <ul>. Pour une liste numérotée, utilisez les balises <ol> et <li>.

Vous voulez ajouter une ligne pour séparer des sections de votre contenu ? La balise <hr> crée une règle horizontale. C’est un moyen simple de diviser visuellement votre texte.

Ce ne sont là que quelques exemples, mais vous pouvez voir à quel point le HTML peut être vraiment utile dans WordPress. Il s’agit d’ajouter un peu de structure et de fonctionnalités supplémentaires au contenu de votre site web.

Comment apprendre le HTML de WordPress

Alors, vous vous dites : « D’accord, le HTML semble utile, mais comment l’apprendre ? » Bonne question ! Heureusement, il existe une multitude de ressources formidables.

Voici quelques endroits où vous pouvez commencer à apprendre le HTML dès maintenant.

MDN Web Docs est comme l’encyclopédie du développement web. Il est créé par Mozilla (les gens derrière Firefox) et il est super complet et fiable.

Si vous aimez l’apprentissage interactif, Codecademy est génial. Ils ont des cours où vous écrivez réellement du code dans votre navigateur.

W3schools est un site web populaire pour les tutoriels de développement web. Ils ont des tonnes d’exemples et de références HTML.

Vous voulez voir comment le HTML est utilisé spécifiquement dans WordPress ? Consultez la documentation officielle des développeurs WordPress. C’est un peu plus technique, mais c’est une excellente ressource à mesure que vous vous sentez plus à l’aise.

Quelle que soit la ressource que vous choisissez, le plus important est la pratique. Sérieusement. Vous n’apprendrez pas le HTML simplement en le lisant. Vous devez écrire du code et voir ce qui se passe.

Expérimentez ! N’ayez pas peur de casser des choses. C’est comme ça qu’on apprend.

Comment utiliser le HTML dans WordPress

Il existe plusieurs façons d’utiliser le HTML dans WordPress. Passons-les en revue une par une.

1. Ajouter un bloc HTML personnalisé dans l'éditeur de blocs

Si vous utilisez l’éditeur de blocs (Gutenberg) dans WordPress, vous pouvez utiliser un bloc spécial juste pour le HTML. Il s’appelle le bloc HTML personnalisé.

Pour l’utiliser, ajoutez simplement un nouveau bloc à votre page ou article WordPress. Recherchez « HTML » dans la barre de recherche de blocs. Vous verrez le bloc HTML personnalisé apparaître.

Cliquez dessus pour l’ajouter à votre contenu. C’est comme ajouter n’importe quel autre bloc. Vous pouvez même le faire glisser et le déposer où vous voulez qu’il aille.

Une fois que vous ajoutez le bloc, vous verrez une boîte où vous pouvez taper ou coller votre code HTML WordPress. Il suffit de mettre votre HTML directement là.

Cliquez sur Aperçu pour voir à quoi ressemble votre code HTML sur la page sans la publier réellement.

C'est vraiment pratique pour vérifier votre code.

2. Modifier un bloc en HTML

Saviez-vous que vous pouvez modifier n'importe quel bloc WordPress en HTML ? Oui, même ces blocs de paragraphes ordinaires.

C'est utile si vous souhaitez apporter de petites modifications HTML à un bloc déjà existant.

Tout d'abord, cliquez sur le bloc que vous souhaitez modifier. Ensuite, recherchez les trois points dans la barre d'outils du bloc. Cliquez dessus.

Un menu apparaîtra. Dans ce menu, appuyez sur le bouton Modifier en HTML.

Soudain, le bloc se transformera ! Au lieu de l'éditeur visuel habituel, vous verrez le code HTML personnalisé pour ce bloc. Vous pouvez maintenant modifier directement le HTML.

C'est idéal pour de petites retouches. Peut-être souhaitez-vous ajouter une classe spécifique à un paragraphe pour un style ultérieur. Ou peut-être avez-vous besoin de corriger un petit problème de formatage plus facile à gérer en HTML.

Une fois que vous avez terminé la modification du HTML, vous pouvez cliquer sur Modifier visuellement dans la barre d'outils du bloc pour revenir à la vue normale de l'éditeur visuel.

3. Utiliser l'éditeur de code dans Gutenberg

Pour ceux qui sont à l'aise avec le code, l'éditeur de blocs WordPress dispose d'une vue complète de l'éditeur de code. Celle-ci vous montre le code HTML de l'ensemble de votre article ou de votre page.

Pour passer à l'éditeur de code, regardez en haut à droite de votre écran d'éditeur Gutenberg. Vous y verrez également trois points – le menu d'options principal pour l'ensemble de l'éditeur. Cliquez sur ces points.

Dans ce menu, vous verrez une option appelée Éditeur de code. Cliquez dessus.

Vous verrez les balises et la structure de toute votre page présentées en code.

Cet éditeur HTML WordPress est vraiment destiné aux utilisateurs avancés qui préfèrent travailler directement dans le code. Si vous aimez coder et que vous souhaitez voir la structure HTML globale de votre page, l'éditeur de code est fait pour vous.

Mais attention ! Si vous faites des erreurs en HTML, vous pourriez gâcher la mise en page de votre site. Il est important de comprendre le HTML si vous comptez utiliser l'éditeur de code de manière intensive.

Si vous souhaitez revenir à l'éditeur visuel normal, retournez simplement dans le menu en haut à droite et cliquez sur Éditeur visuel.

4. Ajouter du HTML avec l'éditeur classique

L'éditeur classique de WordPress a deux onglets : Visuel et Texte. L'onglet Texte est l'endroit où vous pouvez accéder au code.

Lorsque vous cliquez sur Texte, vous verrez tout le code HTML de votre article. C'est là que vous pouvez écrire ou coller du code HTML directement.

Après avoir ajouté ou modifié votre HTML, vous pouvez cliquer sur l'onglet Visuel pour voir à quoi cela ressemble. Il vous montrera la version rendue de votre HTML.

5. Utiliser un plugin de snippets de code WordPress

Parfois, vous souhaitez ajouter de petits bouts de HTML, CSS ou JavaScript à votre site WordPress. Peut-être souhaitez-vous ajouter un code de suivi personnalisé, ou un style spécial pour une certaine partie de votre site.

Vous pourriez modifier les fichiers de votre thème pour ce faire, mais cela peut être risqué. Et si votre thème se met à jour, vos modifications pourraient être écrasées.

C'est là que les plugins d'extraits de code entrent en jeu. Ces plugins vous permettent d'ajouter des extraits de code directement depuis votre tableau de bord WordPress.

Ils gardent votre code organisé et séparé des fichiers de votre thème. C'est beaucoup plus sûr et plus facile à gérer, surtout si vous n'êtes pas un expert en code.

Avant d'ajouter des extraits de code, il est toujours bon de sauvegarder votre site web ! Si quelque chose tourne mal avec votre code, vous voulez pouvoir restaurer facilement votre site.

Duplicator est un plugin qui facilite grandement la création de sauvegardes complètes de votre site WordPress. Je recommande toujours de sauvegarder avant d'apporter des modifications au code.

Mon plugin préféré pour les extraits de code est WPCode (anciennement « Insérer les en-têtes et pieds de page »). Cet outil vous permet d'ajouter du HTML, du CSS et du JavaScript à votre site web.

De plus, il existe des tonnes d'extraits pré-faits que vous pouvez utiliser si vous n'êtes pas habitué au codage.

Utiliser un plugin d'extraits de code est beaucoup plus sûr que de modifier directement les fichiers du thème. Il est également plus facile de suivre votre code personnalisé.

6. Ajouter du HTML dans les widgets WordPress

WordPress est livré avec un widget intégré appelé pour le HTML personnalisé. Pour le trouver, allez dans votre tableau de bord WordPress et cliquez sur Apparence puis sur Widgets.

Vous verrez différentes zones de widgets, comme la barre latérale ou le pied de page. Celles-ci dépendent de votre thème WordPress.

Ajoutez le widget HTML personnalisé dans la zone de widgets où vous souhaitez ajouter votre HTML.

Tapez ou collez votre HTML directement dans cette boîte.

Vous pouvez ajouter toutes sortes de choses avec du HTML dans les widgets. Texte personnalisé, images, liens, même des codes d'intégration – tout fonctionne !

Après avoir ajouté votre HTML, cliquez sur le bouton Mettre à jour dans les paramètres du widget.

Et voilà ! Votre HTML sera maintenant en ligne dans cette zone de widgets sur votre site web.

7. Modifier le HTML dans les thèmes WordPress

Vous pouvez en fait aller directement dans les fichiers de votre thème WordPress et modifier le HTML là-bas. Cela vous donne beaucoup de contrôle sur la structure de votre site, mais cela comporte également des risques importants.

Modifier directement les fichiers du thème peut casser votre site web si vous n'êtes pas prudent. Une petite erreur dans le code peut causer des problèmes majeurs.

Si vous allez modifier les fichiers du thème, je vous recommande d'utiliser toujours un thème enfant. Un thème enfant est comme une copie de sécurité de votre thème principal où vous pouvez apporter des modifications en toute sécurité. De cette façon, si votre thème principal est mis à jour, vos modifications ne seront pas écrasées.

Bon, mises en garde mises à part, voici comment vous pouvez modifier les fichiers du thème. Dans votre tableau de bord WordPress, allez dans Apparence puis dans Éditeur de fichiers du thème (parfois appelé simplement Éditeur de thème).

Sur le côté droit, vous verrez une liste des fichiers de votre thème. Ces fichiers contrôlent la structure et la mise en page de votre site web.

Certains fichiers courants contenant du HTML sont :

• header.php : Ce fichier contrôle généralement le tout début de votre site web – la zone d'en-tête.
• footer.php : Ce fichier contrôle le tout bas – la zone de pied de page.
• sidebar.php : Si votre thème a une barre latérale, ce fichier la contrôle.
• index.php : C'est souvent la page principale de votre site web, affichant vos articles de blog.
• single.php : Ceci contrôle la façon dont les articles de blog individuels sont affichés.
• page.php : Ceci contrôle la façon dont les pages régulières (comme « À propos » ou « Contact ») sont affichées.
• Fichiers de modèle : Votre thème peut contenir d'autres fichiers de modèle pour différents types de pages.

Vous pouvez modifier le HTML directement dans l'éditeur de fichiers du thème. Cliquez simplement sur un fichier pour l'ouvrir, trouvez le HTML que vous souhaitez modifier et apportez vos modifications. Cliquez ensuite sur Mettre à jour le fichier pour enregistrer vos modifications.

Rappel : Ne modifiez les fichiers du thème que si vous savez vraiment ce que vous faites, et utilisez toujours un thème enfant et ayez une sauvegarde.

D'après mon expérience, je ne modifie les fichiers de thème que pour des personnalisations très spécifiques qui ne peuvent pas être réalisées autrement. Et même dans ce cas, je suis extrêmement prudent. Les thèmes enfants et les sauvegardes Duplicator font toujours partie de mon flux de travail lorsque je touche aux fichiers du thème.

8. Utiliser FTP pour modifier le HTML de WordPress

FTP signifie File Transfer Protocol (protocole de transfert de fichiers). Il vous donne un accès plus direct pour modifier les fichiers de votre thème WordPress (et d'autres fichiers également).

Pour utiliser FTP, vous aurez besoin de quelques éléments :

• Un client FTP : C'est un logiciel qui vous permet de vous connecter à votre serveur. Les clients FTP populaires sont FileZilla, Cyberduck et Transmit.
• Identifiants FTP : Vous les obtiendrez auprès de votre fournisseur d'hébergement Web. Ils comprennent généralement votre hôte FTP, votre nom d'utilisateur, votre mot de passe et votre numéro de port.

Si vous ne trouvez pas vos identifiants FTP, vérifiez les paramètres de votre compte d'hébergement ou contactez le support.

Une fois que vous avez ces informations, ouvrez votre client FTP et entrez vos identifiants FTP pour vous connecter à votre serveur.

Après vous être connecté, vous verrez une vue à deux volets. Un volet affiche les fichiers de votre ordinateur, et l'autre volet affiche les fichiers de votre serveur Web.

Naviguez vers les fichiers de votre thème WordPress sur le côté serveur. Le chemin est généralement quelque chose comme /wp-content/themes/votre-nom-de-theme/.

Une fois que vous avez effectué une sauvegarde et que vous êtes dans votre dossier de thème via FTP, vous pouvez télécharger les fichiers HTML du thème sur votre ordinateur ou les modifier directement.

Faites simplement un clic droit sur le fichier dans votre client FTP et choisissez Télécharger ou Afficher/Modifier.

Maintenant, modifiez le fichier téléchargé sur votre ordinateur à l'aide d'un éditeur de code. Les bons éditeurs de code pour cela sont VS Code, Sublime Text, Atom ou Notepad++.

Ouvrez le fichier dans votre éditeur de code et apportez vos modifications HTML.

Une fois que vous avez terminé d'ajouter du HTML, enregistrez le fichier. Faites un clic droit sur le fichier dans votre client FTP et choisissez Télécharger. Cela écrasera le fichier d'origine sur votre serveur avec votre version modifiée.

FTP est un outil puissant, mais il nécessite un certain savoir-faire technique. Et il est important d'être responsable lors de son utilisation. Vérifiez toujours vos modifications avant de les télécharger, et ayez toujours une sauvegarde prête.

Questions fréquemment posées (FAQ)

Réflexions finales

Apprendre ne serait-ce qu'un peu de HTML peut vraiment ouvrir un nouveau monde de possibilités avec WordPress. Cela vous donne plus de contrôle, plus de flexibilité et une compréhension plus approfondie du fonctionnement réel des sites Web.

N'ayez pas peur de continuer à apprendre et à expérimenter. Plus vous jouerez avec le code, plus vous serez à l'aise.

Explorez les ressources que j'ai mentionnées, essayez les différentes manières d'ajouter du HTML dans WordPress, et voyez ce que vous pouvez créer !

Et rappelez-vous, sauvegardez toujours votre site avant d'apporter des modifications importantes ! Des outils comme Duplicator facilitent les sauvegardes et peuvent vous éviter bien des tracas par la suite.

Pendant que vous êtes ici, je pense que vous aimerez ces autres guides WordPress :

• Oubliez tout ce que vous savez sur les éditeurs de code WordPress – Essayez ceci à la place
• 15 meilleurs outils sans code pour WordPress
• Codez plus intelligemment, pas plus dur : outils de développement WordPress pour tous les professionnels
• Comment utiliser l'interface de ligne de commande WordPress : maîtrisez la ligne de commande
• Combien de temps faut-il pour apprendre WordPress ?